import { TabBar } from 'antd-mobile';
import React from 'react';
import { withRouter,Link } from 'react-router-dom'
import Home from '../pages/home/home'
import Mine from '../pages/mine/mine'


import cookbook from 'assets/cookbook.png'
import cookbookActive from 'assets/cookbook-active.png'

import location from 'assets/location.png'
import locationActive from 'assets/location-active.png'

import menu from 'assets/menu.png'
import menuActive from 'assets/menu-active.png'

import more from 'assets/more.png'
import moreActive from 'assets/more-active.png'

const routes = require('@/router')

 class Tab extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: 'cookbook',
      hidden: false,
      fullScreen: true,
    };
  }
  componentDidMount(){
    console.log(routes)
    console.log(this.props)
  }

  renderContent(pageText) {
    return (
      <div style={{ backgroundColor: 'white', height: '100%', textAlign: 'center' }}>
        <div style={{ paddingTop: 60 }}>Clicked “{pageText}” tab， show “{pageText}” information</div>
        <Link to='/home'>点击</Link>
        <span style={{ display: 'block', marginTop: 40, marginBottom: 20, color: '#108ee9' }}
          onClick={(e) => {
            e.preventDefault();
            this.setState({
              hidden: !this.state.hidden,
            });
          }}
        >
          Click to show/hide tab-bar
        </span>
        <span style={{ display: 'block', marginBottom: 600, color: '#108ee9' }}
          onClick={(e) => {
            e.preventDefault();
            this.setState({
              fullScreen: !this.state.fullScreen,
            });
          }}
        > 
          Click to switch fullscreen
        </span>
      </div>
    );
  }

  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#000"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          <TabBar.Item
            title="美食大全"
            key="cookbook"
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: `url( ${cookbook}) center center /  21px 21px no-repeat `}}
            />
            }
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: `url(${cookbookActive}) center center /  21px 21px no-repeat` }}
            />
            }
            selected={this.state.selectedTab === 'cookbook'}
            onPress={() => {
              this.setState({
                selectedTab: 'cookbook',
              });
            }}
            data-seed="logId"
          >
            <Home />

          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${menu}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${menuActive}) center center /  21px 21px no-repeat` }}
              />
            }
            title="分类"
            key="menu"
            selected={this.state.selectedTab === 'menu'}
            onPress={() => {
              console.log(this.props)
              this.props.history.push({
                pathname: '/home',
              });
              // this.setState({
              //   selectedTab: 'menu',
              // });
            }}
          >
              
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${location}) center center /  21px 21px no-repeat` }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: `url(${locationActive}) center center /  21px 21px no-repeat` }}
              />
            }
            title="美食地图"
            key="location"
            selected={this.state.selectedTab === 'location'}
            onPress={() => {
              this.setState({
                selectedTab: 'location',
              });
            }}
            data-seed="logId1"
          >
            {this.renderContent('location')}
          </TabBar.Item>
          
          <TabBar.Item
            icon={{ uri: `${more}` }}
            selectedIcon={{ uri: `${moreActive}` }}
            title="更多"
            key="more"
            selected={this.state.selectedTab === 'more'}
            onPress={() => {
              this.setState({
                selectedTab: 'more',
              });
            }}  
          >
           <Mine />
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
export default withRouter(Tab)